<style scoped>
     .Table_B{
        width: 100%;
        height: 54px;
        background-color:#fff;
        margin-bottom:12px;
        border-radius:3px;
    }
    .Table_B ul li{
        float:left;
        margin:10px 5px 0 10px;
    }
    .Table_C{
        margin-top:5px;
        width: 100%;
        height:44px;
        background-color:#fff;
        line-height:44px;
    }
    .Table_C p{
        float:left;
    }
    .page1{
        float:right;
        margin-top:7px;
        margin-right:20px;
    }
</style>

<template>
    <Row type="flex">
        <div class="Table_B">
            <ul>
                <li><i-input icon="ios-search-strong" placeholder="按批次号..." style="width: 200px" class="nav_Search"></i-input></li>
                <li><i-input icon="ios-search-strong" placeholder="按批次号..." style="width: 200px" class="nav_Search"></i-input></li>
                <li><i-input icon="ios-arrow-down" placeholder="按批次号..." style="width: 200px" class="nav_Search"></i-input></li>
                <li><i-input icon="ios-search-strong" placeholder="按产品..." style="width: 200px" class="nav_Search"></i-input></li>
            </ul>
        </div>
        <i-table border :content="self" :columns="columns14" :data="data1"></i-table>
        <div class="Table_C">
            <p>共<span style="color:red">1256</span>条记录，当前显示第<span style="color:red">1</span>页</p>
            <div class="page1">
                <Page :total="100"></Page>
            </div>
        </div>
    </Row>
</template>
<script>
    export default {
        methods:{
            show (index) {
                this.$Modal.info({
                    title: '用户信息',
                    content: `姓名：${this.data1[index].name}<br>年龄：${this.data1[index].age}<br>地址：${this.data1[index].address}`
                })
            },
            remove (index) {
                this.data1.splice(index, 1);
            }
        },
        data () {
            return {
                self: this,
                columns14: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '编号',
                        key: 'number'
                    },
                    {
                        title: '工号',
                        key: 'gonghao'
                    },
                    {
                        title: '登录账户',
                        key: 'user'
                    },
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '性别',
                        key: 'sex'
                    },
                    {
                        title: '手机',
                        key: 'mobile'
                    },
                    {
                        title: '邮箱',
                        key: 'email'
                    },
                    {
                        title: '所在工厂',
                        key: 'gongchang'
                    },
                    {
                        title: '所在车间',
                        key: 'chejian'
                    },
                    {
                        title: '登录次数',
                        key: 'cishu'
                    },
                    {
                        title: '最后登录时间',
                        key: 'address'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render (row, column, index) {
                            return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
                        }
                    }

                ],
                data1: [
                    {
                        name: '王小明',
                        actioni: 18,
                        address: '2017-01-01',
                        number:1,
                        gonghao:1,
                        user:'ztf59',
                        sex:'男',
                        mobile:'12345678911',
                        email:'ztf59@126.com',
                        gongchang:'北京工厂1',
                        chejian:'自动车间',
                        cishu:'1'
                    },
                    {
                        name: '张小刚',
                        actioni: 25,
                        address: '北京市海淀区西二旗',
                        number:2,
                        gonghao:1,
                        user:'ztf74110',
                        sex:'男',
                        mobile:'12345678911'
                    },
                    {
                        name: '李小红',
                        actioni: 30,
                        address: '上海市浦东新区世纪大道',
                        number:3,
                        gonghao:1
                    },
                    {
                        name: '周小伟',
                        actioni: 26,
                        address: '深圳市南山区深南大道'
                    }
                ]
            }
        }
    }
</script>
